<template>
  <div class="w-full h-full flex justify-between">
    <game-customer />
    <game-chat v-if="mainState.tabActive == 0" />
    <service-chat v-if="mainState.tabActive == 1" />
    <lottery-list />
  </div>
</template>
<script setup lang="ts">
import GameCustomer from "./components/game-customer.vue";
import GameChat from "./components/game-chat.vue";
import ServiceChat from "./components/service-chat.vue";
import LotteryList from "./components/lottery-list.vue";

import $bus from "@/utils/bus";
import { useServiceStore } from "@/store/modules/service";

const route = useRoute();
const serviceStore = useServiceStore();
const mainState = reactive<MainState>({
  loading: false,
  gameSwitch: true,
  tabActive: 0,
  gameActive: 0,
  serviceActive: 0,
  lotterySwitch: true,
  windoWidth: 1480,
  autoScrollToBottom: true,
  unreadMessage: 0,
  windowWidth: false
});
provide("mainState", mainState);

const setWindowWidth = () => {
  const width = window.innerWidth;
  mainState.windoWidth = width;
};
watch(
  () => mainState.tabActive,
  val => {
    serviceStore.setTabActive(!!val);
  }
);
watch(
  () => mainState.serviceActive,
  val => {
    serviceStore.setServiceActive(val);
  }
);
onMounted(() => {
  if (route.query.tab && !isNaN(Number(route.query.tab as string))) {
    mainState.tabActive = Number(route.query.tab);
  }
  setWindowWidth();
  serviceStore.setTabActive(!!mainState.tabActive);
  serviceStore.setServiceActive(0);
  window.addEventListener("resize", setWindowWidth);
});
onBeforeUnmount(() => {
  serviceStore.setTabActive(!!mainState.tabActive);
  serviceStore.setServiceActive(0);
  $bus.off("open-result");
  $bus.off("update-total-result");
  $bus.off("game-bet");
  $bus.off("kefu-msg");
  $bus.off("init-socket");
});
</script>
<style scoped>
.mark {
  @apply w-full h-full bg-[#00000050];
  @apply fixed top-0 right-0 z-[2000];
}
</style>
